<template>
	<view>
		<u-navbar title="订单" :is-back="false" :title-bold="true"></u-navbar>
		<view style="padding-bottom: 10rpx">
			<u-tabs-swiper
				ref="uTabs"
				:list="list"
				:current="current"
				@change="tabsChange"
				:is-scroll="false"
				swiperWidth="750"
				active-color="#ff9900"
			></u-tabs-swiper>
		</view>
		<swiper class="swiper_box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="i in 4" :key="index">
				<scroll-view
					style="width: 100%; height: calc(100vh - 44px - 48px - 50px - 50px)"
					@scrolltolower="onreachBottom"
					:scroll-y="true"
				>
					<view class="">
						<u-card
							:show-head="false"
							:show-foot="false"
							:thumb="thumb"
							v-for="(item, index) in orderList"
							:key="index"
						>
							<view class="order_box" slot="body">
								<view class="order_item_box">
									<view class="order_num_box">
										<text>订单号：{{ item.id }}</text>
										<u-tag
											:text="item.orderStatus | orderState"
											size="mini"
											shape="circle"
											:type="item.orderStatus | orderStateClass"
										/>
									</view>
									<u-line />
									<view class="order_content_box">
										<u-image
											:border-radius="10"
											width="250rpx"
											height="250rpx"
											:src="item.fileUrl"
										></u-image>
										<view class="right">
											<view class="info_title">
												<u-tag
													:text="getWeek(item.groundingTime)"
													mode="dark"
													shape="circle"
													size="mini"
													type="warning"
												/>
												<text style="margin-left: 10rpx">{{ item.comboName }}</text>
											</view>
											<view class="info_number">x {{ item.comboNumber }}</view>
											<view class="info_price">￥{{ item.comboPrice }}</view>
											<view class="time">下单：{{ item.orderTime }}</view>
											<view class="time">
												送餐：{{ moment(item.orderTime).format('YYYY-MM-DD') }}
											</view>
											<text class="info_total_price">￥ {{ item.comboPriceTotal }}</text>
										</view>
									</view>
									<view class="option_box">
										<u-button
											v-if="item.orderStatus === 1"
											type="primary"
											shape="circle"
											size="mini"
											@click="$refs.contact.open()"
										>
											联系商家
										</u-button>
										<u-button
											v-if="item.orderStatus === 1"
											type="warning"
											shape="circle"
											size="mini"
											style="margin-left: 10rpx"
											@click="cancelOrder(item)"
										>
											取消订单
										</u-button>
									</view>
								</view>
							</view>
						</u-card>
					</view>
					<u-empty mode="order" v-if="orderList.length === 0"></u-empty>
					<u-loadmore v-if="orderList.length !== 0" :status="loadingStatus" />
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 联系商家 -->
		<Contact ref="contact" />
		<!-- 底部导航栏 -->
		<Tabbar />
	</view>
</template>

<script>
import { orderPageList, wacOrderCancel } from '@/api/order'
import Contact from '@/components/Contact'

export default {
	components: {
		Contact
	},
	data() {
		return {
			list: [
				{
					name: '全部'
				},
				{
					name: '待确认'
				},
				{
					name: '配送中'
				},
				{
					name: '已完成'
				}
			],
			orderList: [],
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
			total: '',
			form: {
				pageNum: 1,
				pageSize: 3
			},
			loadingStatus: 'loadmore'
		}
	},
	onLoad() {},
	onShow() {
		this.getOrderPageList()
	},
	onReachBottom() {
		console.log('onReachBottom  到底了')
		// if (this.orderList.length < this.total) {
		// 	this.form.pageSize += 3
		// 	this.getOrderPageList()
		// }
	},
	methods: {
		// 取消订单
		async cancelOrder(row) {
			await wacOrderCancel({ id: row.id })
			this.getOrderPageList()
		},
		async getOrderPageList(orderStatus = '') {
			const res = await orderPageList({ orderStatus, ...this.form })
			this.orderList = res.rows
			this.total = res.total
			this.loadingStatus = 'loadmore'
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.form.pageSize = 3
			this.swiperCurrent = index
			this.getOrderPageList(index === 0 ? '' : index)
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx
			this.$refs.uTabs.setDx(dx)
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current
			this.$refs.uTabs.setFinishCurrent(current)
			this.swiperCurrent = current
			this.current = current

			this.form.pageSize = 3
			this.getOrderPageList(current === 0 ? '' : current)
		},
		// scroll-view到底部加载更多
		onreachBottom() {
			console.log('到底了')
			if (this.orderList.length < this.total) {
				this.form.pageSize += 3
				this.loadingStatus = 'loading'
				this.getOrderPageList()
			} else {
				this.loadingStatus = 'nomore'
			}
		}
	}
}
</script>

<style>
page {
	background-color: #eeeeee;
}
</style>

<style scoped lang="scss">
.swiper_box {
	// height: 100vh;
	// height: 500px;
	height: calc(100vh - 44px - 48px - 50px - 50px);
	// padding-bottom:  100px;
}

::v-deep .u-empty {
	margin-top: 100rpx !important;
}

.order_box {
	.order_item_box {
		margin-bottom: 20rpx;

		.option_box {
			display: flex;
			justify-content: flex-end;
			margin-top: 30rpx;
		}

		.order_num_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
		}

		.order_content_box {
			margin-top: 20rpx;
			display: flex;
			position: relative;

			.right {
				margin-left: 30rpx;
				flex: 1;

				.info_title {
					font-size: 26rpx;
					font-weight: bold;
				}

				.info_describe {
					font-size: 24rpx;
					color: #999;
					margin-top: 25rpx;
				}

				.time {
					font-size: 24rpx;
					margin-top: 25rpx;
				}

				.info_total_price {
					position: absolute;
					top: 65rpx;
					right: 5rpx;
				}

				.info_price {
					font-size: 26rpx;
					color: #101010;
					margin-top: 5rpx;
				}

				.info_number {
					font-size: 26rpx;
					color: #888;
					margin-top: 10rpx;
				}
			}
		}
	}
}
</style>
